<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">
      <!-- <xdh-form class="design-form" :class="classes" v-bind="form" :model="formData" design-mode :load="load" ref="form"> -->
        <div style="height:300px">
          <draggable v-model="sortable_item" :options="dragOptions2" @add="onAdd">
            <transition-group class="form-list-group" type="transition" :name="'flip-list'" tag="div">
              <!-- <el-form-item v-for="(item, index) in fields" :key="item.prop" v-bind="clone(item)" :class="{'is-helper':showHelper===item, 'is-select':editField===item}" @mouseenter.native="handleMouseEnter(item)" @mouseleave.native="handleMouseLeave(item)">
                {{fields}}
                <div class="mask" slot="body" @click.stop="handleEditItem(item)">
                  <span class="depend-info" v-show="item.depend">依赖：{{item.depend}}</span>
                  <div class="handle-btns">
                    <i class="el-icon-delete" @click.stop="removeItem(item)"></i>
                  </div>
                </div>
              </el-form-item> -->
               <Renders v-for="(element,index) in sortable_item" :key="element.prop" :index="index" :item="element" @handleChangeVal="val => handleChangeVal(val,element)" />

            </transition-group>
          </draggable>
        </div>
      <!-- </xdh-form> -->
    </el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>
</template>

<script>
import XdhForm from '../xdh-form'
import XdhFormItem from '../xdh-form-item'
import draggable from 'vuedraggable'
import Renders from '@/components/public/renders'
import cloneDeep from 'lodash/cloneDeep'
import { mapState, mapGetters } from 'vuex'
import { load } from '@/widgets/helper/setting/dict'
export default {
  name: 'WidgetTag',
  data: function () {
    return {
      info: {},
      activeName: 'first',
      packedNodeStack: [],
      previewInfo: null,
      selectNode: null,
      selectNodeStacked: true,
      editType: 'editor',
      pageInfo: {
        id: 1,
        name: '目名',
        categoryId: 2,
        content: '',
        desc: '项目描述'
      },
      // sortable_item: [],
      formData: {},
      showHelper: null,
      dragging: false,
      ismousedown: false,
      load: load
    }
  },
  components: { draggable, XdhForm, XdhFormItem, Renders },
  computed: {
    ...mapState({
      Config: state => state.Config,
      RootNodeInfo: state => state.RootNodeInfo,
      phoneSize: state => state.setting.phoneSize,
      PHONE_SIZES: state => state.Metadata.phoneSize,
      form: state => state.formModel,
      fields: state => state.fields,
      editField: state => state.editField
    }),
    ...mapGetters(['model']),
    sortable_item: {
      get() {
        return this.$store.state.fields
      },
      set(value) {

      }
    },
    dragOptions2() {
      return {
        animation: 0,
        ghostClass: 'ghost',
        group: {
          // 只允许放置shared的控件,禁止pull
          put: ['shared']
        }
      }
    },
    classes() {
      return {
        'is-empty': this.fields.length === 0
      }
    },

  },
  methods: {
    clone(data) {
      console.log('clone')
      return JSON.parse(JSON.stringify(data))
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    onAdd(e) {
      const item = e.item._underlying_vm_;
      if (item) {
        this.handleDrop(item, e.newIndex)
      }
    },
    handleDrop(item, index) {
      if (item) {
        const defaultName = `${item.type}_${new Date().getTime()}`
        console.log(item, 12321321)
        const newItem = {
          ...item,
          label: item.title,
          prop: defaultName,
          value: item.value,
          type: item.type
        }
        // delete newItem.title
        console.log(newItem)
        // this.sortable_item[index] = Object.assign({}, newItem);
        this.$store.commit('addField', { field: newItem, index: index })
        //  this.$forceUpdate();
      }
    },
    handleMouseEnter(item) {
      console.log('handleMouseEnter', item)
      if (this.dragging) return
      this.showHelper = item
    },
    handleMouseLeave(item) {
      this.showHelper = null
    },
    handleEditItem(item, index) {
      item.index = index;
      let info = Object.assign({}, item);
      this.$store.dispatch('user/setNodeinfo', info);
      this.$store.commit('setEditField', info)
      console.log('handleEditItem', this.$store.getters, 8888888888);
      // this.$store.dispatch('setNoDeInfo',info)
    },
    removeItem(item) {
      const isDepend = !!this.fields.find(n => n.depend === item.prop)
      if (isDepend) {
        this.$message.warning('该字段被其他字段依赖，不能删除')
        return
      }
      this.$store.commit('setEditField', null)
      this.$store.commit('removeField', item)
    },
    handleDblClick() {
      this.$store.commit('setEditField', null)
    },
  }
}
</script>
